<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-/">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Painel de Botões - Neumorfismo</title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="buttonPanel.css"/>
  </head>
  <body>
    <section id="light-container" class="container">
      <button id="wifi-light-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-wifi" aria-hidden="true"></i>
      </button>
      <button id="bluetooth-light-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-bluetooth-b" aria-hidden="true"></i>
      </button>
      <button id="bell-light-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-bell" aria-hidden="true"></i>
      </button>
      <button id="bolt-light-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-bolt" aria-hidden="true"></i>
      </button>
      <button id="phone-light-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-phone" aria-hidden="true"></i>
      </button>
      <button id="volume-light-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-volume-up" aria-hidden="true"></i>
      </button>
      <button id="plane-light-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-plane" aria-hidden="true"></i>
      </button>
      <button id="share-light-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-share-alt" aria-hidden="true"></i>
      </button>
      <button id="eye-light-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-eye" aria-hidden="true"></i>
      </button>
    </section>

    <section id="dark-container" class="container">
      <button id="wifi-dark-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-wifi" aria-hidden="true"></i>
      </button>
      <button id="bluetooth-dark-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-bluetooth-b" aria-hidden="true"></i>
      </button>
      <button id="bell-dark-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-bell" aria-hidden="true"></i>
      </button>
      <button id="bolt-dark-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-bolt" aria-hidden="true"></i>
      </button>
      <button id="phone-dark-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-phone" aria-hidden="true"></i>
      </button>
      <button id="volume-dark-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-volume-up" aria-hidden="true"></i>
      </button>
      <button id="plane-dark-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-plane" aria-hidden="true"></i>
      </button>
      <button id="share-dark-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-share-alt" aria-hidden="true"></i>
      </button>
      <button id="eye-dark-button" class="action-button" onclick="changeButtonState(this.id)">
        <i class="fa fa-eye" aria-hidden="true"></i>
      </button>
    </section>
  </body>
  
  <script src="./buttonPanel.js"></script>
</html>